<script setup lang="ts">
import { ref, computed, watch, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import SplashScreen from './components/SplashScreen.vue'

const router = useRouter()
const route = useRoute()

const activeTab = ref('home')
const showSplash = ref(true)

// 监听路由变化更新底部导航
const updateActiveTab = () => {
  const path = route.path
  console.log('📍 App: 路由变化:', path)
  if (path === '/') {
    activeTab.value = 'home'
  } else if (path === '/statistics') {
    activeTab.value = 'statistics'
  } else if (path === '/add') {
    activeTab.value = 'add'
  } else if (path === '/settings') {
    activeTab.value = 'settings'
  }
}

// 监听路由变化
watch(() => route.path, updateActiveTab, { immediate: true })

// 底部导航点击事件
const onTabChange = (name: string) => {
  switch (name) {
    case 'home':
      router.push('/')
      break
    case 'statistics':
      router.push('/statistics')
      break
    case 'add':
      router.push('/add')
      break
    case 'settings':
      router.push('/settings')
      break
  }
}

// 需要显示底部导航的路由 - 使用计算属性使其响应式
const showTabbar = computed(() => {
  const hideTabbarRoutes = ['/edit', '/categories', '/category-detail']
  return !hideTabbarRoutes.some(hiddenRoute => route.path.startsWith(hiddenRoute))
})

// 处理启动画面加载完成
const handleSplashLoaded = () => {
  console.log('✅ 数据加载完成，隐藏启动画面')
  showSplash.value = false
}

// 在挂载时确保路由已初始化到首页
onMounted(() => {
  console.log('📱 App: onMounted被调用')
  console.log('📍 App: 当前路由:', route.path)
  console.log('📍 App: 完整URL:', window.location.href)
  
  // 强制导航到首页，确保HomeView被加载和挂载
  // 在Cordova中，URL可能是/index.html，需要重定向到/
  if (route.path !== '/' && route.path !== '') {
    console.log('📍 App: 从', route.path, '导航到首页')
    router.replace('/').then(() => {
      console.log('📍 App: 路由替换完成')
    })
  } else {
    console.log('📍 App: 已在首页')
  }
})
</script>

<template>
  <div class="app">
    <!-- 启动画面 - 用v-show而不是v-if，确保主内容也能渲染 -->
    <SplashScreen v-show="showSplash" @loaded="handleSplashLoaded" />
    
    <!-- 主内容 - 始终渲染，只是在启动画面显示时隐藏 -->
    <div class="main-content" :class="{ hidden: showSplash }">
      <RouterView />
      
      <!-- 底部导航栏 -->
      <van-tabbar 
        v-model="activeTab" 
        @change="onTabChange"
        v-if="showTabbar"
        fixed
        placeholder
      >
        <van-tabbar-item name="home" icon="home-o">
          首页
        </van-tabbar-item>
        <van-tabbar-item name="statistics" icon="chart-trending-o">
          统计
        </van-tabbar-item>
        <van-tabbar-item name="add" icon="plus">
          记账
        </van-tabbar-item>
        <van-tabbar-item name="settings" icon="setting-o">
          设置
        </van-tabbar-item>
      </van-tabbar>
    </div>
  </div>
</template>

<style scoped>
.app {
  height: 100vh;
  background: linear-gradient(135deg, #ffeef8 0%, #fff5f7 50%, #f3e7ff 100%);
  position: relative;
}

.main-content {
  width: 100%;
  height: 100%;
  opacity: 1;
  transition: opacity 0.3s ease;
}

.main-content.hidden {
  opacity: 0;
  pointer-events: none;
  position: absolute;
  z-index: -1;
}

:deep(.van-tabbar) {
  border-top: 1px solid #ffd4e8;
  background: linear-gradient(to bottom, rgba(255,255,255,0.95), rgba(255,245,252,0.95));
  backdrop-filter: blur(10px);
  box-shadow: 0 -2px 15px rgba(255, 107, 181, 0.1);
}

:deep(.van-tabbar-item) {
  color: #999;
}

:deep(.van-tabbar-item--active) {
  color: #ff6bb5;
}

/* 确保全局背景色 */
:deep(.van-popup),
:deep(.van-overlay) {
  z-index: 9998;
}
</style>
